<template>
  <div class="list-page">
    <div class="list-page-main">
      <div class="pb20">
        <n-button type="primary" @click="handAdd()">
          <i class="esayIcon esayIcon-tianjiawenjianjia"></i>
          <span class="pl8">添加</span>
        </n-button>
        <n-button class="ml10" type="error" @click="handDel()">
          <i class="esayIcon esayIcon-shanchu"></i>
          <span class="pl8">批量删除</span>
        </n-button>
      </div>
      <n-data-table
        v-model:checked-row-keys="tableInfo.checkedRowKeys"
        style="flex: 1"
        flex-height
        :row-key="rowKey"
        :columns="columns"
        :loading="tableInfo.listLoading"
        :data="tableInfo.tableData"
      />
    </div>
    <Edit ref="addRef" @success="queryData" />
    <DelConfirm ref="delRef" @confirm="delConfirm" />
  </div>
</template>

<script setup lang="ts">
import { h, ref, reactive, provide, defineAsyncComponent } from 'vue'
import { NButton, NDataTable, NTag } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { useApi } from '@/hooks/useApi'
import DelConfirm from '@/components/nComponents/DelConfirm'
import versionApi from '@/service/api/operation/version'
import { getVersionTypeName } from '@/enum/VersionTypeEnum'
const Edit = defineAsyncComponent(() => import('./components/Edit.vue'))

const addRef = ref()
const delRef = ref()
const optionsState = reactive({
  routeList: []
})
provide('optionsState', optionsState)

const { handAdd, tableInfo, queryData, handDel, delConfirm } = useApi({
  isPaging: true,
  addRef,
  delRef,
  getData: versionApi.list,
  delData: versionApi.dels
})
const rowKey = (row: any) => row.id
/**
 *  获取列表
 * */
const columns: DataTableColumns<any> = [
  {
    type: 'selection',
    options: ['all', 'none'],
    disabled(row) {
      return row.name === 'Edward King 3'
    }
  },
  {
    title: '版本号',
    key: 'versionCode'
  },
  {
    title: '版本名称',
    key: 'versionName'
  },
  {
    title: '版本描述',
    key: 'versionInfo'
  },
  {
    title: '平台',
    key: 'updateType',
    align: 'center',
    render(row: any) {
      return h(
        NTag,
        {
          type: 'primary'
        },
        { default: () => getVersionTypeName(row.updateType) }
      )
    }
  },
  {
    title: '操作',
    key: 'total',
    align: 'center',
    width: 200,
    render(row: any) {
      return h('div', [
        h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            quaternary: true,
            onClick: () => handAdd(row)
          },
          { default: () => '编辑' }
        ),
        h(
          NButton,
          {
            size: 'small',
            quaternary: true,
            type: 'error',
            onClick: () => handDel(row)
          },
          { default: () => '删除' }
        )
      ])
    }
  }
]
</script>

<style lang="scss" scoped></style>
